<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">

</head>
<body>
<button class="btn btn-success" id="btn1">点我</button>


<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="bootdialog.min.js"></script>
<script>
    var btn1 = document.querySelector('#btn1');
    btn1.addEventListener('click', function () {
        BootDialog.fire({
            title: 'New message',
            body: `
            <form>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label">Message:</label>
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
    `,

            footer: `
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary send-btn">Send message</button>
    `,

            onCreate: function (modal) {

                modal.element.onclick = function (event) {
                    event.preventDefault()

                    var form = modal.element.querySelector('form');

                    if (event.target.classList.contains('send-btn')) {

                        var Recipient = form.querySelector('#recipient-name').value;
                        var Message = form.querySelector('#message-text').value;
                        var Result = `
                            <b>Recipient</b>:${Recipient} <br/>
                            <b>Message</b>:${Message} <br/>
                        `;
                        BootDialog.fire(Result, '返回结果:')
                    }
                }
            }
        })
    });
</script>
</body>
</html>